<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper v-if="goodsInfo && goodsInfo.atlas && goodsInfo.atlas.length > 0" class="banner-swiper"
			indicator-dots="true" autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item, index) in goodsInfo.atlas" :key="index">
				<image :src="item" class="banner-image"></image>
			</swiper-item>
		</swiper>

		<!-- 商品信息 -->
		<view v-if="goodsInfo" class="goods-info">
			<text class="goods-name">{{goodsInfo.goods_name}}</text>
			<text class="goods-description">{{goodsInfo.description}}</text>
			<view class="price-container">
				<text class="sell-price">¥{{goodsInfo.sell_price}}</text>
				<text class="original-price"
					v-if="goodsInfo.original_price > goodsInfo.sell_price">¥{{goodsInfo.original_price}}</text>
			</view>
			<view class="sales-info">
				<text>月销 {{goodsInfo.month_sale_num}} | 库存 {{goodsInfo.num }}</text>
			</view>
			<view class="attr-container" v-if="goodsInfo.goods_attr_list && goodsInfo.goods_attr_list.length > 0">
				<view class="attr-item" v-for="(attr, index) in goodsInfo.goods_attr_list" :key="index">
					<text>{{attr.attrs}}: ¥{{attr.attr_price}}/{{attr.attr_company}}</text>
				</view>
			</view>
		</view>
		<!-- 服务保障 -->
		<view class="service-section" v-if="goodsInfo && goodsInfo.parameter">
			<view class="section-title">
				<text>服务保障</text>
			</view>
			<view class="richtext">
				<rich-text :nodes="goodsInfo.parameter"></rich-text>
			</view>
		</view>
		<!-- 评价部分 -->
		<!-- <view class="evaluation-section" v-if="goodsEvaluateList && goodsEvaluateList.length > 0">
			<view class="section-title">
				<text>商品评价 ({{goodsEvaluateList.length}})</text>
				<text class="all-evaluate" @click="navigateToEvaluate">全部评价 &gt;</text>
			</view>
			<view class="evaluation-item" v-for="(item, index) in goodsEvaluateList" :key="index">
				<view class="user-info">
					<image :src="item.member_head" class="avatar"></image>
					<text class="nickname">{{item.member_nickname || '匿名用户'}}</text>
				</view>
				<view class="star-container">
					<text class="star" v-for="i in 5" :key="i" :class="i <= item.star_num ? 'active' : ''">★</text>
				</view>
				<view class="label-container" v-if="item.label_list && item.label_list.length > 0">
					<text class="label" v-for="(label, i) in item.label_list" :key="i">{{label}}</text>
				</view>
				<text class="content" v-if="item.content">{{item.content}}</text>
			</view>
		</view> -->

		<!-- 商品详情 -->
		<view class="detail-section" v-if="goodsInfo && goodsInfo.content">
			<view class="section-title">
				<text>商品详情</text>
			</view>
			<view class="richtext">
				<rich-text :nodes="goodsInfo.content"></rich-text>
			</view>

		</view>



		<!-- 底部购买栏 -->
		<view class="bottom-bar" v-if="goodsInfo">
			<view class="cart-btn" @click="toggleCollection">
				<image mode="widthFix"
					:src="isCollected ==1 ? '../../static/androidImg/icon_collection.png' : '../../static/androidImg/icon_collection_not.png'"
					class="iconfont"></image>
				<text>收藏</text>
			</view>
			<view class="cart-btn" @click="callPhone">
				<image src="../../static/androidImg/icon_customer.png" mode="widthFix" class="iconfont"></image>
				<text>客服</text>
			</view>
			<view class="buy-btn" @click="addToCart">加入购物车</view>
		</view>
		<!-- 规格选择弹窗 -->
		<spec-modal v-if="goodsInfo" :goods="goodsInfo" :show.sync="showSpecModal"
			@confirm="confirmAddToCart"></spec-modal>
	</view>
</template>

<script>
	import api from '../../api/request';
	import specModal from '../../components/specModal.vue';
	export default {
		components: {
			specModal
		},
		data() {
			return {
				goodsId: '',
				goodsInfo: '',
				goodsEvaluateList: [],
				callPhoneNum: '',
				showSpecModal: false,
				isCollected: 0
			}
		},
		onLoad(options) {
			// 获取商品ID
			console.log(options, options.goods_id)
			if (options && options.goods_id) {
				this.goodsId = options.goods_id;
				this.getGoodsDetail();
				this.checkIsCollected();
			} else {
				uni.showToast({
					title: '商品ID不存在',
					icon: 'none'
				});
			}
		},
		methods: {
			// 跳转到全部评价页面
			navigateToEvaluate() {
				uni.navigateTo({
					url: '/pages/goods/goodsEvaluate?goods_id=' + this.goodsId
				});
			},
			// 获取商品详情
			getGoodsDetail() {
				uni.showLoading({
					title: '加载中'
				});
				api.goodsDetail({
					goods_id: this.goodsId
				}).then(res => {
					uni.hideLoading();
					if (res.code === 1 && res.data) {
						this.goodsInfo = res.data.goods_info;
						this.goodsEvaluateList = res.data.goods_evaluate_list || [];
						// 处理图片路径
						if (this.goodsInfo.atlas) {
							this.goodsInfo.atlas = this.goodsInfo.atlas.map(img => {
								// 移除图片路径中的空格和多余的反斜杠
								return img.replace(/`/g, '').trim();
							});
						}
						// 处理富文本中的图片路径
						if (this.goodsInfo.content) {
							var newHtml = this.goodsInfo.content.replace(/(<img\s+.*?)(style=".*?")?(.*?>)/g,
								function(match, p1, p2, p3) {
									var newStyle =
										'style="max-width:100%;height:auto;display:block;margin:0 auto"';
									if (p2) {
										// 如果已有style属性，替换它
										return p1 + newStyle + p3;
									} else {
										// 如果没有style属性，添加它
										return p1 + ' ' + newStyle + p3;
									}
								})
							this.goodsInfo.content = newHtml; //替换
						}
						// 富文本图片样式
						if (this.goodsInfo.parameter) {
							var newHtml = this.goodsInfo.parameter.replace(/(<img\s+.*?)(style=".*?")?(.*?>)/g,
								function(match, p1, p2, p3) {
									var newStyle =
										'style="max-width:100%;height:auto;display:block;margin:0 auto"';
									if (p2) {
										// 如果已有style属性，替换它
										return p1 + newStyle + p3;
									} else {
										// 如果没有style属性，添加它
										return p1 + ' ' + newStyle + p3;
									}
								})
							this.goodsInfo.parameter = newHtml; //替换
						}
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('获取商品详情失败', err);
					uni.showToast({
						title: '获取商品详情失败',
						icon: 'none'
					});
				});
			},

			// 打开规格选择弹窗
			addToCart() {
				if (!this.goodsInfo) {
					uni.showToast({
						title: '商品信息加载中，请稍候',
						icon: 'none'
					});
					return;
				}
				this.showSpecModal = true;
			},

			// 确认添加到购物车
			confirmAddToCart(data) {
				const {
					spec,
					num
				} = data;

				api.addCart({
					goods_id: this.goodsId,
					num: num,
					item: spec.id
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '添加成功'
						});
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/cart'
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg || '添加失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('添加购物车失败', err);
					uni.showToast({
						title: '添加购物车失败',
						icon: 'none'
					});
				});
			},

			// 检查是否收藏
			checkIsCollected() {
				api.isCheckIsCollect({
					goods_id: this.goodsId
				}).then(res => {
					if (res.code === 1) {
						this.isCollected = res.data.info === 1;
					}
				}).catch(err => {
					console.error('检查收藏状态失败', err);
				});
			},

			// 切换收藏状态
			toggleCollection() {
				uni.showLoading({
					title: '处理中'
				});
				api.addCollect({
					goods_id: this.goodsId
				}).then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						this.isCollected = !this.isCollected;
						if (this.isCollected) {
							uni.showToast({
								title: '收藏成功'
							});
						} else {
							uni.showToast({
								title: '取消收藏'
							});
						}
					} else {
						uni.showToast({
							title: res.msg || '操作失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('收藏操作失败', err);
					uni.showToast({
						title: '收藏操作失败',
						icon: 'none'
					});
				});
			},
			// 获取手机号
			getPhone() {
				api.getCustomerImage().then(res => {
					if (res.code === 1) {
						this.callPhoneNum = res.data.service_phone;
					} else {
						uni.showToast({
							title: '获取客服电话失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取客服电话失败', err);
					uni.showToast({
						title: '获取客服电话失败',
						icon: 'none'
					});
				});
			},

			// 立即购买
			buyNow() {
				// 这里需要实现立即购买的逻辑
				uni.showToast({
					title: '立即购买功能待实现',
					icon: 'none'
				});
			},

			// 拨打客服电话
			callPhone() {
				if (!this.callPhoneNum) {
					this.getPhone();
					// 延迟一下，确保能获取到电话
					setTimeout(() => {
						if (this.callPhoneNum) {
							uni.makePhoneCall({
								phoneNumber: this.callPhoneNum
							});
						} else {
							uni.showToast({
								title: '暂无客服电话',
								icon: 'none'
							});
						}
					}, 500);
				} else {
					uni.makePhoneCall({
						phoneNumber: this.callPhoneNum
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: 100rpx;
		/* 为底部购买栏预留空间 */
	}

	.iconfont {
		width: 50rpx;
		display: block;
	}

	.richtext {
		image {
			max-width: 100% !important;
			height: auto !important;
			display: block;
			margin: 0 auto;
		}
	}

	/* 轮播图样式 */
	.banner-swiper {
		width: 750rpx;
		height: 500rpx;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	/* 商品信息样式 */
	.goods-info {
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.goods-name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.goods-description {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 15rpx;
	}

	.price-container {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.sell-price {
		font-size: 36rpx;
		color: #e64340;
		font-weight: bold;
	}

	.original-price {
		font-size: 26rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 15rpx;
	}

	.sales-info {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 15rpx;
	}

	.attr-container {
		margin-top: 15rpx;
	}

	.attr-item {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	/* 评价部分样式 */
	.evaluation-section {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	.section-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.all-evaluate {
		color: #e64340;
		font-size: 26rpx;
		padding-right: 10rpx;
	}

	.evaluation-item {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		margin-bottom: 20rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 15rpx;
		background: #ccc;
	}

	.nickname {
		font-size: 26rpx;
		color: #333;
	}

	.star-container {
		display: flex;
		margin-bottom: 15rpx;
	}

	.star {
		font-size: 28rpx;
		color: #ccc;
		margin-right: 5rpx;
	}

	.star.active {
		color: #ff9500;
	}

	.label-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15rpx;
	}

	.label {
		background-color: #f5f5f5;
		color: #666;
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.content {
		font-size: 26rpx;
		color: #333;
	}

	/* 商品详情样式 */
	.detail-section {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	/* 服务保障样式 */
	.service-section {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 底部购买栏样式 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		padding: 15rpx 0;
	}

	.cart-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #333;
	}

	.buy-btn {
		flex: 3;
		background-color: #e64340;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 0 20rpx;
	}

	/* 收藏按钮激活状态 */
	// .cart-btn.active image {
	// 	filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(350deg);
	// }
</style>